<template>
  <div class="content">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="招聘文案库"
      fixed
    >
      ></van-nav-bar
    >

    <main>
      <van-search
        shape="round"
        placeholder="搜索招聘标题"
        v-model="title"
        @input="searchKey"
      />

      <van-tabs
        v-model="type"
        color="blue"
        @click="setType(type)"
        title-active-color="#0264D1"
        line-width="0"
        sticky
        offset-top="100px"
        swipeable
      >
        <van-tab v-for="(item, index) in tabs" :key="index" :title="item.title">
          <div class="list" v-if="recruitmentArr.length != 0">
            <div
              class="item"
              v-for="(item, index) in recruitmentArr"
              :key="index"
              @click="$router.push({path:'/recruitmentdetails',query:{id:item.id,type:1}})"
            >
              <div class="left">
                <img :src="$publicObj.urlImg(item.cover)" />
                <img
                  src="../../assets/images/task/getMoney.png"
                  alt=""
                  class="money"
                  v-show="item.type == 9"
                />
              </div>
              <div class="right">
                <span class="title">{{ item.title }}</span>
                <span class="p">{{ item.describes }}</span>
                <div class="bottom">
                  <span  @click.stop="goDetail(item)">阅读:{{ item.score || 0 }}次</span>
                  <span>分享:{{ item.share || 0 }}次</span>
                  <span>上传时间:{{ item.gmtCreate.substring(0, 11) }}</span>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="暂无数据" />
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "", //搜素的文章标题
      recruitmentArr: [], //文章列表
      page: 1, //当前页数,
      agentId: "",
      wxUserInfo: {}, //微信用户个人信息
      type: 0,
      isPower:3,
      tabs: [],
    };
  },

  async mounted() {
    this.isCustomer();
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));

    this.agentId = sessionStorage.getItem("agentId");

    // 获取个人信息
    await this.$store.dispatch("updateUserInfo");

    this.completedTaskRecruitList();
    this.getRecruitmentType();
  },

  methods: {
     //判断是否有权限创建
    async isCustomer () {
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: this.wxUserInfo.openid,
        account,
        id: this.$store.state.userInfo.id,
        phone: this.$store.state.userInfo.phone,
      });
      this.isPower = res.data;
      this.info = res.info;
    },
    //点击跳转详情
    goDetail(item) {
        if (this.isPower == 3) return this.$toast("权限不足！");
        let obj = {
            cover:item.cover,
            title:item.title,
            description:item.describes,
            share:item.share,
            score:item.score,
            gmtCreate:item.gmtCreate,
        };
        sessionStorage.setItem("taskDetail", JSON.stringify(obj));
       this.$router.push(`/taskDetails?id=${item.id}&title=招聘`);
    },
    //搜素
    searchKey() {
      clearTimeout(this.time);
      this.time = setTimeout(async (_) => {
        this.completedTaskRecruitList();
        this.time = null;
      }, 700);
    },
    // 切换
    setType(n) {
      this.type = n;
      this.completedTaskRecruitList();
    },
    //获取招聘类型
    async getRecruitmentType() {
      let res = await this.$api.getRecruitmentType();
      this.tabs = res.data.map((item) => {
        return { title: item.typeName, id: item.number };
      });
    },
    //获取招聘文案列表
    async completedTaskRecruitList() {
       let obj={}
      if(this.type==0){
        obj.recruitStoreType="",
        obj.isCheck=1,
        obj.title=this.title,
        obj.recruitStore=1
      }else{
        obj.recruitStoreType=this.type,
        obj.isCheck=1,
        obj.title=this.title,
        obj.recruitStore=1
      }
      let res = await this.$api.completedTaskRecruitList(obj);
      if (res.code != 0) return;
      this.recruitmentArr = res.data.list || [];
    },
  },
};
</script>

<style scoped lang="less">
main {
  padding: 0 15px;

  padding-top: 46px;
  .poster_type {
    ul {
      display: -webkit-flex;
      display: flex;
      justify-content: space-around;
      li {
        font-size: 16px;
        color: #666;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        padding: 5px 0;
        i {
          width: 28px;
          height: 3px;

          border-radius: 3px;
          position: absolute;
          bottom: -5px;
        }
      }
      .active {
        font-weight: 700;
        color: #4f5cd3;
        i {
          background-color: #0264d1;
        }
      }
    }
  }

  .list {
    height: calc(100vh - 195px);
    overflow-y: scroll;
    .item {
      display: flex;
      margin-top: 12px;
      .left {
        width: 90px;
        height: 90px;
        margin-right: 15px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        .money {
          width: 35px;
          height: 35px;
          position: absolute;
          right: 0;
          top: 0;
          border-radius: none;
        }
      }
      .right {
        flex: 1;

        span {
          font-size: 11px;
          color: #999999;
        }
        .title {
          margin-top: 5px;
          display: block;
          font-size: 14px;
          color: #333333;
        }
        .p {
          margin-top: 3px;
          height: 30px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
        .bottom {
          width: 246px;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          span {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
